<template>
	<view class="content">
		<!-- 顶部标题和返回 -->
		<view class="top_nav">
			<image @click="backPage" class="nav_img" :src="imgUrl+'/static/wap/img/whiteBack.png'"></image>
			<text>物业费</text>
		</view>
		

		<!-- 物业费 -->
		<view class="property_head">
			<view class="water_fee">
				<view class="fee_one">
					<image class="fee_img" :src="imgUrl+'/static/wap/infoImg/wu@2x.png'"></image>
					<text class="jfName">物业费</text>
					<text style="height: 120rpx;">{{year}}</text>
				</view>
				<view class="fee_tow">
					<view class="fee_tow_fl">
						<view>门牌号: </view>
						<view>{{settlementDetails.room_id}}</view>
					</view>
					<view class="fee_tow_fr">
						<view>户型面积（平方米）</view>
						<view>{{settlementDetails.room}}</view>
					</view>
				</view>
			</view>
		</view>

		

		<!-- 账单 -->
		<view class="cwater_bill">
			<!-- 账单 上 -->
			<view class="bill_top">
				<view class="bill_top_fl" @click="historyBill">
					<image :src="imgUrl+'/static/wap/infoImg/zhangdan@2x.png'"></image>
					<text>历史账单</text>
				</view>
				<view class="bill_top_fr" @click="goPayRecord">
					<image :src="imgUrl+'/static/wap/infoImg/fenxi@2x.png'"></image>
					<text>缴费记录</text>
				</view>
			</view>
			
			<!-- 账单 物业费中 -->
			<view class="bill_con" >
				<text>当前余额（元）:</text>
				<text>{{settlementDetails.now_balance}}</text>
			</view>
			<view class="bill_con" style="margin-top: 20rpx;">
				<text>结算时间:</text>
				<text>{{settlementDetails.settlement_time}}</text>
			</view>
			<!-- 账单 物业费下-->
			<view class="bill_foo">
				<view class="bill_foo_fl">
					<text>{{year}}年总物业费（元）</text>
					<text>{{settlementDetails.year_total}}</text>
				</view>
				<view class="bill_foo_fr">
					<text>缴纳物业费时间至</text>
					<text>{{settlementDetails.last_month + '月'||"无"}}</text>
				</view>
			</view>
			
			<view class="bill_btn" style="background-color: #17AFA8;"  @click="pay">
				<text>立即缴费</text>
			</view>
			
		</view>
	
		
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import util from '../../static/util.js'
	let _self;
	let canvaColumn = null;
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				date:'',
				year:'',
				type: '',
				title: '',
				stat: '',
				// 状形图
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvasColumn: '1',
				"chartData": {
					"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周天"], 
					// 状图配置
					"series": [{
						"name": "电量(度)",
						"data": [22,33,44,11,22,33,11],
						"color": '#94DC86',
						"textSize": '0', 
					}]
				} ,
				settlementDetails:'',//物业费
			};
		},
		onLoad(opt) {
			this.getTime()
			//this.settlementPropertyApi()
			this.showSettlementDetailsApi()
			
			
		},
		methods: {
			getTime:function(){
				var sdate = new Date();
				this.year = sdate.getFullYear()
			},
			// 点击返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			historyBill(){
				uni.navigateTo({
					url:"../bill/propertyBill"
				})
			},
			//显示物业费缴纳详细
			showSettlementDetailsApi(){
				var that=this;
				that.ajax({
					url:'api/Property/showSettlementDetailsApi',
					method:'post',
					data:{
						flag:1
					},
					success:function(res){
						that.settlementDetails=res.data
					}
				  })
			},
			//物业费结算
			settlementPropertyApi(){
				var that=this;
				that.ajax({
					url:'api/Property/settlementPropertyApi',
					method:'post',
					data:{
						flag:1
					},
					success:function(res){
						
					}
				  })
			},
			pay(){
				uni.navigateTo({
					url:'../payPage/payPage?type=3'
				})
			},
			goPayRecord(){
				uni.navigateTo({
					url:'../payRecord/payRecord'
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="less" scoped>
	.content {
		position: relative;
		color: #333;
	}
    .jfName{
		font-size: 36rpx;
	}
	.cwater_head,
	.electricity_head,
	.property_head {
		position: relative;
		height: 355rpx;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/shui_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			position: absolute;
			top: 180rpx;
			width: 100%;
			height: 358rpx;
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 36rpx;
				height: 50%;
			}

			.fee_one {
				line-height: 200rpx;
				font-size: 36rpx;

				.fee_img {
					margin: auto 0;
					margin-right: 40rpx;
					width: 53rpx;
					height: 53rpx;
				}

				& text:nth-child(3) {
					font-size: 28rpx;
					color: #fff;
					float: right;
				}
			}

			.fee_tow {
				display: flex;
				line-height: 60rpx;
				
				view {
					font-size: 27rpx;
					flex: 1;
					/* text-align: center; */
					padding-left: 10rpx;
				}
			}
		}
	}

	// 物业费样式
	.property_head {
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/wu_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/wu_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 20rpx;
			}

			.fee_one {
				padding: 0 40rpx;
			}

		}
	}

	// 电费样式
	.electricity_head {
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 20rpx;
			}

			.fee_one {
				padding: 0 40rpx;
			}

		}
	}

	.cwater_bill {
		margin-top: 160rpx;

		.bill_top {
			padding: 0 38rpx;
			display: flex;
			font-size: 36rpx;
			color: #999;
			height: 130rpx;
			line-height: 130rpx;

			view {
				text-align: center;
				flex: 1;

				image {
					margin-right: 20rpx;
					width: 66rpx;
					height: 66rpx;
				}
			}

		}

		.bill_con {
			display: flex;
			justify-content: space-between;
			padding: 0 38rpx;
			height: 107rpx;
			line-height: 107rpx;
			background-color: #F3F3F5;
			font-size: 36rpx;
		}

		.bill_foo {
			display: flex;
			justify-content: space-between;
			padding: 0 38rpx;
			height: 234rpx;

			view {
				width: 50%;
				text-align: left;
				color: #999;
			}

			.bill_foo_fl {
				font-size: 36rpx;
				color: #11A2F3;

				& text:nth-child(1) {
					display: block;
					margin: 60rpx 0 20rpx 0;
					color: #999;
					font-size: 26rpx;
				}
			}

			.bill_foo_fr {
				position: relative;
				width: 40%;
				font-size: 36rpx;
				color: #FB8F24;

				& text:nth-child(1) {
					display: block;
					margin: 60rpx 0 20rpx 0;
					color: #999;
					font-size: 26rpx;
				}
			}

			.bill_foo_fr::before {
				position: absolute;
				left: -60rpx;
				top: 60rpx;
				content: '';
				width: 1rpx;
				height: 86rpx;
				background-color: #DCDCDC;
				border: 1px solid #DCDCDC;
			}
		}

		.bill_btn {
			margin: 0 auto;
			margin-top: 20rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			border-radius: 45rpx;
			background-color: #0C94ED;
			width: 690rpx;
			
		}
	}

	.cwater_foo {
		padding: 30rpx;
		height: 700rpx;
		font-size: 30rpx; 

		text {
			margin-bottom: 60rpx;
			display: block;
		}

		.cwater_graph {
			position: relative;
			height: 420rpx; 
			.qiun_layer{
				position: absolute;
				left: 32%;
				bottom: -40rpx;
				width: 200rpx;
				height: 40rpx;
				background-color: #fff;
			}
		}
	}

	// 顶部返回和标题
	.top_nav {
		position: absolute;
		top: var(--status-bar-height);
		left: 0;
		right: 0;
		height: 80rpx;
		line-height: 80rpx;
		z-index: 10;
		font-size: 36rpx;
		color: #fff;
		text-align: center;

		.nav_img {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}
	// 状图
	.charts {
		width: 750rpx;
		height: 400rpx;
		background-color: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 96%;
		padding: 10rpx 2%;
		flex-wrap: nowrap;
	}
	
	// 标题
	.qiun-title-dot-light {
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #666
	}
	
	.qiun-charts {  
		width: 750rpx;
		height: 440rpx;
		background-color: #FFFFFF;
	}
</style>
